
<template>
  <div class="message-con">
    <div class="con-left">
      <div style="width:100%;padding-left:10px"><div style="cursor: pointer;" @click="$router.push('./')" class="btn">返回</div></div>
      <div class="scren-title-right">
        <span class="year">{{ nowYear }}</span>
        <span class="week">{{ nowWeek }}</span>
        <span class="time">{{ nowDate }}</span>
      </div>
      <div class="con-item">
        <p style="width: 100%;padding-left:20px">number:123456</p>
      </div>
      <div class="con-item">
        <div id="myChart" :style="{ width: '300px', height: '180px'}"></div>
      </div>
      <div class="con-item">
        <div id="chartLine" :style="{ width: '300px', height: '180px' }"></div>
      </div>
      <div class="con-item">
        <div id="chartPie" :style="{ width: '300px', height: '180px' }"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'Message',
  data() {
    return {
      nowYear: '', //当前年
      nowWeek: '', //当前星期
      nowDate: '' //当前时间
    }
  },
  created() {
    this.Jump()
  },
  mounted() {
    this.currentTime()
    this.initChart()
  },
  methods: {
    Jump(){
      //接收ue4 返回信息,跳转回首页
      ue.interface.jumpInfo = val => {
        if(val){
          this.$router.push('./') 
        }
      }
    },
    currentTime() {
      setInterval(this.formatDate, 500)
    },
    formatDate() {
      let date = new Date()
      let year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      let day = date.getDate() // 日
      let week = date.getDay() // 星期
      let weekArr = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ]
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowYear = `${year}年${month}月${day}日`
      this.nowWeek = `${weekArr[week]}`
      this.nowDate = `${hour}:${minute}:${second}`
    },
    initChart(datas) {
      console.log('initchart')
      let myChart = echarts.init(document.getElementById('myChart'))
      let chartLine = echarts.init(document.getElementById('chartLine'))
      let chartPie = echarts.init(document.getElementById('chartPie'))
      let option = {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['50%', '90%'],
            radius: '100%',
            min: 0,
            max: 1,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 6,
                color: [
                  [0.25, '#FF6E76'],
                  [0.5, '#FDDD60'],
                  [0.75, '#58D9F9'],
                  [1, '#7CFFB2']
                ]
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '20%',
              width: 10,
              offsetCenter: [0, '-40%'],
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              length: 12,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            splitLine: {
              length: 20,
              lineStyle: {
                color: 'auto',
                width: 5
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 14,
              distance: -50,
              rotate: 'tangential',
              formatter: function(value) {
                if (value === 0.875) {
                  return 'Grade A'
                } else if (value === 0.625) {
                  return 'Grade B'
                } else if (value === 0.375) {
                  return 'Grade C'
                } else if (value === 0.125) {
                  return 'Grade D'
                }
                return ''
              }
            },
            title: {
              offsetCenter: [0, '-10%'],
              fontSize: 14
            },
            detail: {
              fontSize: 14,
              offsetCenter: [0, '-30%'],
              valueAnimation: true,
              formatter: function(value) {
                return Math.round(value * 100)
              },
              color: 'auto'
            },
            data: [
              {
                value: 0.7,
                name: 'Grade Rating',
                title: {
                  color:'#fff'
                }
              }
            ]
          }
        ]
      }
      let optionLine = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: { show: false },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '3%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: '#fff',
              width: 0,
              type: 'solid'
            }
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          data: [
            '00',
            '02',
            '04',
            '06',
            '08',
            '10',
            '12',
            '14',
            '16',
            '18',
            '20',
            '22',
            '24'
          ]
        },
        yAxis: {
          type: 'value',
          axisLine: {
            //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: '#fff',
              width: 0,
              type: 'solid'
            }
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            name: '进',
            type: 'line',
            stack: '总量',
            data: [0, 20, 12, 12, 22, 114, 10, 32, 12, 22, 24, 10, 55],
            symbol: 'none', //去除小圆点
            itemStyle: {
              normal: {
                color: '#35BD39', //改变折线点的颜色
                lineStyle: {
                  color: '#35BD39', //改变折线颜色
                  width: 3 //改变粗细
                }
              }
            }
          },
          {
            name: '出',
            type: 'line',
            stack: '总量',
            data: [11, 2, 5, 12, 22, 114, 10, 32, 12, 22, 24, 10, 55],
            symbol: 'none', //去除小圆点
            itemStyle: {
              normal: {
                color: '#E16757', //改变折线点的颜色
                lineStyle: {
                  color: '#E16757', //改变折线颜色
                  width: 3 //改变粗细
                }
              }
            }
          }
        ]
      }
      let optionPie = {
        tooltip: {
          trigger: 'item'
        },
        legend: { show: false },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '65%'],
            center: ['50%', '58%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 3,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true
                // fontSize: '0',
                // fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
      chartLine.setOption(optionLine)
      chartPie.setOption(optionPie)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  },

  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate) // 在Vue实例销毁前，清除时间定时器
    }
  }
}
</script>
<style lang="scss" scoped>
.con-left {
  width: 400px;
  min-height: 100vh;
  background: rgba(0, 0, 0, 0.5); //半透明的黑色
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  color: #fff;
  font-size: 20px;
}
.con-item {
  width: 374px;
  height: 198px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../assets/images/bj.png') no-repeat;
  background-size: contain;
  background-position: center;
}
</style>